<script lang="ts" setup>
import type { ExperimentModel } from '@/apis/course'
import type { ListItem } from '@/types/components-tool'

defineProps<{
  courseName: string
  experiments?: ExperimentModel[]
  loading: boolean
}>()
</script>

<template>
  <a-list size="small" class="" :data="experiments" :loading>
    <template #header>
      <h3 class="card-title"><i class="i-fluent-diversity-48-filled text-lg" />{{ courseName }}</h3>
    </template>
    <template #item="{ item }: ListItem<ExperimentModel>">
      <div class="px-lg py-2 border-b-solid border-b-1 border-arco-2 last:border-b-none">
        <h4 class="my-0 text-arco-2">
          <a-tag bordered color="green" size="small">ID: {{ item.id }}</a-tag>
          {{ item.name }}
        </h4>
        <p class="mb-0 mt-1 text-arco-3">{{ item.description }}</p>
      </div>
    </template>
  </a-list>
</template>
